// name.js
import { setPostion } from "../common/utils.js";
export default {
  props: {
    content: {
      type: String,
      default: "default",
    },
  },
  data() {
    return {
      isPress: false,
      target: null,
      originPos: { x: 0, y: 0, parentElement: null },

      // 鼠标在屏幕中点击的位置
      startX: 0,
      startY: 0,

      // 拖动元素的左上角在屏幕中的位置
      cellX: 0,
      cellY: 0,

      // 拖动元素的宽度 和 高度
      cellW: 0,
      cellH: 0,

      // 鼠标在点击元素中的位置 (不随着拖动而改变)
      mouseX: 0,
      mouseY: 0,
      useableIndex: -1,
      screenX: 0,
      screenY: 0,
    };
  },
  methods: {
    // ------------ 事件处理函数 ------------------------
    // 鼠标按下
    handleMouseDown1(e) {
      this.isPress = true;
      this.target = e.currentTarget;

      // 拖动元素的宽度和高度 width+padding+border
      this.cellW = this.target.offsetWidth;
      this.cellH = this.target.offsetHeight;

      // 当前点击元素的左顶点，在屏幕中的位置
      this.cellX = this.target.offsetLeft;
      this.cellY = this.target.offsetTop;

      // 鼠标电击时的位置
      this.startX = e.clientX;
      this.startY = e.clientY;

      // 计算点击的位置在子元素中的位置 这是固定的
      this.mouseX = this.startX - this.cellX;
      this.mouseY = this.startY - this.cellY;
      this.target.style.width = this.target.offsetWidth + "px";
      this.target.style.height = this.target.offsetHeight + "px";

      this.target.style.position = "fixed";
      this.target.style.zIndex = "9";
      this.target.style.transition = "";
      // 按下时，移除掉done
      this.target.classList.remove("done");
      this.target.style.width = 220 + "px";
      // console.log(this.mouseX);
      setPostion(this.target, [this.cellX, this.cellY]);

      // TODO点击的时候应该判断，是否是从右侧空白格子拖动的
      // 如果是就删除原本在空块中的信息
      let index = -1;
      for (let i = 0; i < this.emptyCellsPos.length; i++) {
        if (this.fillResArr[i] !== undefined) {
          let { startX, startY } = this.emptyCellsPos[i];
          if (startX === this.cellX && startY == this.cellY) {
            index = i;
          }
        }
      }
      if (index !== -1) {
        // 说明当前拖动的位置是从右边的空白区拖动的，而且下面有块，
        this.$store.commit("updateFillResArr", {
          index: [index, index + 1],
          data: undefined,
        });
      }
    },

    // 鼠标移动
    handleMouseMove1(e) {
      e.preventDefault();
      if (!this.isPress) {
        return;
      }
      document.onmousemove = (ev) => {
        // ---------------------------------------------
        // 必须是按压状态、move事件触发的元素与down事件触发的元素还要一致
        if (!this.isPress) {
          return;
        }
        const moveX = ev.clientX,
          moveY = ev.clientY;

        // 计算元素在屏幕中正确的位置，设置到top、left上
        this.cellX = moveX - this.mouseX;
        this.cellY = moveY - this.mouseY;
        // 设置正确的位置
        setPostion(this.target, [this.cellX, this.cellY]);
        // ---------------------------------------------

        this.screenX = ev.screenX;
        this.screenY = ev.screenY;
        // console.log(ev.screenX, ev.screenY);
      };

      for (let i = 0; i < this.emptyCellsPos.length; i++) {
        let { startX, startY, el: emptyEl } = this.emptyCellsPos[i]; // 空白块的左上角，在屏幕中的位置

        if (
          this.screenX > startX &&
          this.screenX < startX + this.cellW &&
          this.screenY > startY &&
          this.screenY - 120 < startY + this.cellH
        ) {
          for (let i = 0; i < this.emptyCellsPos.length; i++) {
            this.emptyCellsPos[i].el.childNodes[0].style.backgroundColor = "";
          }
          this.useableIndex = i;
          if (
            !this.fillResArr[i] &&
            !this.fillResArr[i + 1] &&
            ![3, 7, 11].includes(i)
          ) {
            emptyEl.childNodes[0].style.backgroundColor = "#dbfce6";
            this.emptyCellsPos[i + 1].el.childNodes[0].style.backgroundColor =
              "#dbfce6";
          }
          break;
        } else {
          this.useableIndex = -1;
        }
      }
    },

    // 鼠标抬起
    handleMouseUp1(e) {
      if (!this.isPress) {
        return;
      }
      this.target.style.zIndex = "auto"; // 恢复默认的层级

      const index = this.useableIndex;

      // 【1*2】的块比较的特殊，应该判断后一个还有没有空，
      if (
        index !== -1 &&
        !this.fillResArr[index] &&
        !(this.fillResArr[index + 1] || [3, 7, 11].includes(index))
      ) {
        let { el: emptyEl } = this.emptyCellsPos[index]; // 空白块的左上角，在屏幕中的位置

        // 内容块填入成功，修改记录，表明当前的子块不再空白，已被元素占有！
        this.$store.commit("updateFillResArr", {
          index: [index, index + 1],
          data: {
            char: this.target.innerHTML,
            el: this.target,
          },
        });
        emptyEl.childNodes[0].appendChild(this.target);
        this.target.classList.add("done");
        this.target.style.width = 446 + "px";
      } else {
        // -------- 位置不满足时回到原来的位置 ---------
        this.originPos.parentElement.appendChild(this.target);
        this.target.classList.remove("done");
        this.target.style.width = 220 + "px";
      }
      this.target.style.position = "relative";
      this.target.style.left = "";
      this.target.style.top = "";
      this.target.style.zIndex = "";

      for (let i = 0; i < this.emptyCellsPos.length; i++) {
        this.emptyCellsPos[i].el.childNodes[0].style.backgroundColor = "";
      }

      this.target = null;
      this.isPress = false;
    },
  },
  computed: {
    fillResArr() {
      return this.$store.state.fillResArr;
    },
    emptyCellsPos() {
      return this.$store.state.emptyCellsPos;
    },
  },
  mounted() {
    this.originPos.parentElement = this.$refs.box.parentElement;
    this.originPos.x = this.$refs.box.offsetLeft;
    this.originPos.y = this.$refs.box.offsetTop;
    // console.log(this);
  },
}
